<div class="service-binding">
  <div class="row">
    <div ng-class="{'col-sm-5 col-md-6': $ctrl.isOverview,
                    'col-sm-8 col-md-6 col-lg-8': !$ctrl.isOverview}">
      <h3>
        {{$ctrl.binding.metadata.name}}
        <span ng-if="$ctrl.refApiObject.kind !== 'ServiceInstance'">
          <small ng-if="$ctrl.serviceClass">
            {{$ctrl.serviceClass.spec.externalMetadata.displayName || $ctrl.serviceClass.metadata.name}}
          </small>
          <small>{{$ctrl.binding.spec.instanceRef.name}}</small>
        </span>
        <small>created <span am-time-ago="$ctrl.binding.metadata.creationTimestamp"></span></small>
      </h3>
    </div>
    <div ng-if="$ctrl.binding.metadata.deletionTimestamp"
         ng-class="{'col-sm-7 col-md-6': $ctrl.isOverview,
                    'col-sm-4 col-md-3': !$ctrl.isOverview}">
      <span class="pficon pficon-warning-triangle-o" aria-hidden="true"></span>
      Marked for Deletion
    </div>
    <div ng-if="!$ctrl.binding.metadata.deletionTimestamp && ($ctrl.binding | isBindingFailed)"
         ng-class="{'col-sm-7 col-md-6': $ctrl.isOverview,
                    'col-sm-4 col-md-6 col-lg-4': !$ctrl.isOverview}">
      <span dynamic-content="{{$ctrl.binding | bindingFailedMessage}}" data-toggle="tooltip" data-trigger="hover">
        <span class="pficon pficon-error-circle-o" aria-hidden="true"></span>
        <span>Error</span>
      </span>
    </div>
    <div ng-if="!$ctrl.binding.metadata.deletionTimestamp && !($ctrl.binding | isBindingFailed) && !($ctrl.binding | isBindingReady)"
         ng-class="{'col-sm-7 col-md-6': $ctrl.isOverview,
                    'col-sm-4 col-md-6 col-lg-4': !$ctrl.isOverview}">
      <status-icon status="'Pending'"></status-icon>Pending
    </div>
  </div>
  <div class="service-binding-actions" ng-if="!$ctrl.binding.metadata.deletionTimestamp">
    <delete-link
      ng-if="$ctrl.serviceBindingsVersion | canI : 'delete'"
      kind="ServiceBinding"
      group="servicecatalog.k8s.io"
      type-display-name="binding"
      resource-name="{{$ctrl.binding.metadata.name}}"
      project-name="{{$ctrl.binding.metadata.namespace}}"
      stay-on-current-page="true">
    </delete-link>
    <a ng-if="($ctrl.secretsVersion | canI : 'get') && ($ctrl.binding | isBindingReady)"
       ng-href="{{$ctrl.binding.spec.secretName | navigateResourceURL : 'Secret' : $ctrl.namespace}}">
      View Secret
    </a>
  </div>
  <div class="service-binding-parameters" ng-if="!$ctrl.isOverview && $ctrl.bindParameterSchema.properties">
    <span class="component-label">Parameters</span>
    <a ng-if="$ctrl.allowParametersReveal" href="" class="hide-show-link" ng-click="$ctrl.toggleShowParameterValues()" role="button">
      {{$ctrl.showParameterValues ? 'Hide Values' : 'Reveal Values'}}
    </a>
    <form name="ctrl.parametersForm">
      <catalog-parameters
        hide-values="!$ctrl.showParameterValues"
        opaque-keys="$ctrl.opaqueParameterKeys"
        model="$ctrl.parameterData"
        parameter-form-definition="$ctrl.bindParameterFormDefinition"
        parameter-schema="$ctrl.bindParameterSchema"
        is-horizontal="true"
        read-only="true">
      </catalog-parameters>
    </form>
  </div>
</div>
